<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>集成监控平台</title>
    <meta content="width=device-width, initial-scale=0.7, maximum-scale=0.7, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/monitor/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">-->
    <link rel="stylesheet" href="/monitor/bower_components/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/monitor/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/monitor/dist/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/monitor/dist/css/theme-chalk/index.css">
    <link rel="stylesheet" href="/monitor/daterangepicker/daterangepicker.css">
    <link rel="shortcut icon" href="/monitor/dist/img/log.png"/>

    <script src="/monitor/bower_components/vue/js/html5shiv.min.js"></script>
    <script src="/monitor/bower_components/vue/js/respond.min.js"></script>
    <script src="/monitor/bower_components/vue/js/vue.js"></script>
    <script src="/monitor/bower_components/vue/js/vue-resource.js"></script>
    <script src="/monitor/bower_components/vue/js/index.js"></script>
</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper" id="integrationMetadataEntityRelation">

    <header class="main-header">
        <a href="index.html" class="logo">
            <span class="logo-lg"><b>中台集成</b>监控</span>
        </a>
        <nav class="navbar navbar-static-top">
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
        </nav>
    </header>

    <aside class="main-sidebar">
        <section class="sidebar">
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="/monitor/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>admin</p>
                    <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                </div>
            </div>
            <ul class="sidebar-menu" data-widget="tree">

                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-table"></i> <span>单据同步</span>
                        <span class="pull-right-container">
                          <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/monitor/pages/receipt_note.html"><i class="fa fa-circle-o"></i> 单据 </a></li>
                    </ul>
                </li>

                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-table"></i> <span>主档同步</span>
                        <span class="pull-right-container">
                          <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <!--                        <li><a href="/monitor/pages/meta_data_batch.html"><i class="fa fa-circle-o"></i>主档批次</a></li>-->
                        <li><a href="/monitor/pages/meta_data_entity.html"><i class="fa fa-circle-o"></i>主档详情</a></li>
                        <li><a href="/monitor/pages/meta_data_entity_relation.html"><i class="fa fa-circle-o"></i>主档附录(relation)详情</a>
                        </li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-table"></i> <span>销售数据同步</span>
                        <span class="pull-right-container">
                          <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/monitor/pages/trans_code_info.html"><i class="fa fa-circle-o"></i>【物料转换】汇总 </a></li>
                        <li><a href="/monitor/pages/sale_store_info.html"><i class="fa fa-circle-o"></i>【门店信息】汇总 </a></li>
                        <li><a href="/monitor/pages/pre_sale_total.html"><i class="fa fa-circle-o"></i>【销售预处理】汇总 </a></li>
                        <li><a href="/monitor/pages/sale_total.html"><i class="fa fa-circle-o"></i>【销售】汇总 </a></li>
                        <li><a href="/monitor/pages/pay_total.html"><i class="fa fa-circle-o"></i>【支付】汇总 </a></li>
                    </ul>
                </li>
                <li class="treeview">
                    <a href="#">
                        <i class="fa fa-table"></i> <span>推送日志</span>
                        <span class="pull-right-container">
                          <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="/monitor/pages/third_party_log.html"><i class="fa fa-circle-o"></i>三方日志</a></li>
                    </ul>
                </li>
            </ul>
        </section>
    </aside>

    <div class="content-wrapper" style="min-height: 921px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                中台集成监控 <small>INTEGRATION</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 中台集成监控 </a></li>
                <li><a href="#">中台集成监控</a></li>
                <li class="active">消息</li>
            </ol>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                            <h3 class="box-title">中台集成 主档详情表格</h3>
                        </div>
                        <div class="box-body">
                            <div id="receipt_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                                <div class="row">


                                    <div class="col-lg-4">
                                        <div id="only_source_code" class="dataTables_filter">
                                            <label>唯一标识(code)： <input id="only-source-code" type="search"
                                                                      class="form-control input-sm"
                                                                      placeholder="请输入唯一源编码"
                                                                      aria-controls="example1"></label>
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div id="only-code" class="dataTables_filter">
                                            <label>唯一标识(code)： <input id="code" type="search"
                                                                      class="form-control input-sm"
                                                                      placeholder="请输入唯一编码"
                                                                      aria-controls="example1"></label>
                                        </div>
                                    </div>

                                    <div class="col-lg-4">
                                        <div class="dataTables_length" id="div1">
                                            <label>源数据类型(source_schema_name): <select id="source-schema-name"
                                                                                      aria-controls="order-control"
                                                                                      class="form-control input-sm">
                                                <option value="ALL">ALL</option>
                                                <option value="PRODUCT">PRODUCT</option>
                                                <option value="PRODUCT_CATEGORY">PRODUCT_CATEGORY</option>
                                                <option value="STORE">STORE</option>
                                                <option value="PROMOTION">PROMOTION</option>
                                            </select> </label>
                                        </div>
                                    </div>

                                    <div class="col-lg-4">
                                        <div class="dataTables_length" id="div3">
                                            <label>数据类型(schema_relation_name): <select id="schema-relation-name"
                                                                                       aria-controls="order-control"
                                                                                       class="form-control input-sm">
                                                <option value="ALL">ALL</option>
                                                <option value="UNIT">UNIT</option>
                                            </select> </label>
                                        </div>
                                    </div>

                                    <div class="col-lg-4">
                                        <div class="dataTables_length" id="div2">
                                            <label> 同步状态： <select id="sync-status" aria-controls="order-control"
                                                                  class="form-control input-sm">
                                                <option value="ALL">全部</option>
                                                <option value="S">成功</option>
                                                <option value="E">失败</option>
                                            </select> </label>
                                            <button @click="search" type="button" class="btn btn-warning btn-sm">搜索🔍
                                            </button>
                                        </div>
                                    </div>


                                </div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <table id="integrationMetadataEntityRelation-table"
                                               class="table table-bordered table-hover dataTable"
                                               role="grid" aria-describedby="receipt_info">
                                            <thead>
                                            <tr role="row">
                                                <th>租户</th>
                                                <th>源数据类型</th>
                                                <th>数据类型</th>
                                                <th>唯一标识</th>
                                                <th>父级</th>
                                                <th>报文</th>
                                                <th>最近一次操作</th>
                                                <th>数据有效性</th>
                                                <th>创建时间</th>
                                                <th>更新时间</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            <template v-for="integrationMetadataEntityRelation in tableData">
                                                <tr role="row">
                                                    <td>{{ integrationMetadataEntityRelation.partnerId }}
                                                    <td>
                                                        <div style="color: green">
                                                            <div v-if="integrationMetadataEntityRelation.sourceSchemaName === 'PRODUCT'">
                                                                商品
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div style="color: green">
                                                            <div v-if="integrationMetadataEntityRelation.schemaRelationName === 'UNIT'">
                                                                商品单位
                                                            </div>
                                                        </div>

                                                    </td>

                                                    <td>{{ integrationMetadataEntityRelation.code }}</td>
                                                    <td>{{ integrationMetadataEntityRelation.sourceEntityCode }}</td>
                                                    <td>
                                                        <button type="button"
                                                                class="btn btn-warning"
                                                                data-toggle="modal"
                                                                data-target="#modal-json"
                                                                @click="handleJsonDetail(integrationMetadataEntityRelation.syncEnvent,integrationMetadataEntityRelation.syncMode,integrationMetadataEntityRelation.content, '第三方推送日志报文')">
                                                            报文
                                                        </button>
                                                    </td>
                                                    <td>
                                                        <div style="color: green">
                                                            <div v-if="integrationMetadataEntityRelation.action === 'ADD'">
                                                                新增
                                                            </div>
                                                        </div>
                                                        <div style="color: navy">
                                                            <div v-if="integrationMetadataEntityRelation.action === 'UPDATE'">
                                                                更新
                                                            </div>
                                                        </div>
                                                        <div style="color: red">
                                                            <div v-if="integrationMetadataEntityRelation.action === 'UPDATE_STATUS_ENABLED'">
                                                                启用数据
                                                            </div>
                                                        </div>
                                                        <div style="color: red">
                                                            <div v-if="integrationMetadataEntityRelation.action === 'UPDATE_STATUS_DISABLED'">
                                                                停用数据
                                                            </div>
                                                        </div>
                                                        <div style="color: darkred">
                                                            <div v-if="integrationMetadataEntityRelation.action === 'DEL'">
                                                                删除
                                                            </div>
                                                        </div>

                                                    </td>
                                                    <td>
                                                        <div style="color: green">
                                                            <div v-if="integrationMetadataEntityRelation.isEffective === 0">
                                                                启用
                                                            </div>
                                                        </div>
                                                        <div style="color: darkmagenta"
                                                             v-else-if="integrationMetadataEntityRelation.isEffective === 1">
                                                            停用
                                                        </div>
                                                        <div style="color: red"
                                                             v-else-if="integrationMetadataEntityRelation.isEffective === 2">
                                                            禁用
                                                        </div>
                                                        <div style="text-align: center" v-else>-</div>
                                                    </td>
                                                    <td>{{ integrationMetadataEntityRelation.createTime }}</td>
                                                    <td>{{ integrationMetadataEntityRelation.updateTime }}</td>
                                                    <!--                                                    <td>-->
                                                    <!--                                                        <button type="button"-->
                                                    <!--                                                                v-if="integrationMetadataEntityRelation.syncStatus === 1"-->
                                                    <!--                                                                class="btn btn-info"-->
                                                    <!--                                                                @click="handleUpload(integrationMetadataEntityRelation)"-->
                                                    <!--                                                                :disabled="integrationMetadataEntityRelation.syncStatus === 0 || integrationMetadataEntityRelation.retryCount >= 5">-->
                                                    <!--                                                            重传-->
                                                    <!--                                                        </button>-->
                                                    <!--                                                    </td>-->

                                                </tr>
                                            </template>
                                        </table>

                                        <div align="center">
                                            <el-pagination
                                                    @size-change="handleSizeChange"
                                                    @current-change="handleCurrentChange"
                                                    :current-page="currentPage"
                                                    :page-sizes="[10, 20, 30, 40]"
                                                    :page-size="pageSize"
                                                    layout="total, sizes, prev, pager, next, jumper"
                                                    :total="totalCount">
                                            </el-pagination>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>

    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 2.4.0
        </div>
        <strong>Copyright &copy; 2019-2021 <a href="https://adminlte.io">上海合阔信息技术有限公司</a>.</strong> All rights
        reserved.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
            <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
        </ul>
    </aside>

    <div class="control-sidebar-bg"></div>

    <div class="modal fade" id="modal-json">
        <div class="modal-dialog" style="width:800px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                    <h5 class="modal-title">[{{title}}]主档{{keyWord}}</h5>
                </div>
                <div class="modal-body">
                    <pre>{{ detail }}</pre>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="/monitor/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/monitor/dist/js/moment.min.js"></script>
<script src="/monitor/daterangepicker/daterangepicker.js"></script>
<script src="/monitor/bower_components/jquery/dist/jquery.format.js"></script>
<script src="/monitor/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/monitor/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="/monitor/bower_components/fastclick/lib/fastclick.js"></script>
<script src="/monitor/dist/js/adminlte.min.js"></script>
<script src="/monitor/dist/js/demo.js"></script>
<script src="/monitor/dist/js/main.js"></script>
<script>
    var vue = new Vue({
        el: "#integrationMetadataEntityRelation",
        data: {
            //表格当前页数据
            totalData: [],
            //表格当前页数据
            tableData: [],
            //请求的URL
            url: 'api/v2/admin/metadata/entity/relation/query',
            //默认每页数据量
            pageSize: 10,
            //当前页码
            currentPage: 1,
            //查询的页码
            start: 1,
            //默认数据总数
            totalCount: 1000,
            //添加对话框默认可见性
            dialogVisible: false,
            // 序号ID
            id: '',
            // 单据类型
            type: '',
            // 标题
            title: '',
            // 关键字
            keyWord: '',
            // 报文
            detail: {},
        },

        methods: {
            //从服务器读取数据[含keyword]
            loadData: function (pageNum, pageSize, code, sourceCode, sourceSchemaName, schemaRelationName, syncStatus) {
                var url = '/api/v2/admin/metadata/entity/relation/query';
                var headers = {"Content-Type": "application/json"};
                var data = {"pageNum": pageNum, "pageSize": pageSize};
                var hasNo = 0;
                if (!(typeof (code) == "undefined" || code === "")) {
                    data.code = code;
                    hasNo = 1;
                }
                if (!(typeof (sourceCode) == "undefined" || sourceCode === "")) {
                    data.sourceCode = sourceCode;
                }
                if (!(typeof (sourceSchemaName) == "undefined" || sourceSchemaName === "")) {
                    data.sourceSchemaName = sourceSchemaName;
                }
                if (!(typeof (schemaRelationName) == "undefined" || schemaRelationName === "")) {
                    data.schemaRelationName = schemaRelationName;
                }
                if (!(typeof (syncStatus) == "undefined" || syncStatus === "")) {
                    data.syncStatus = syncStatus;
                }
                if (hasNo == 0) {
                    queryTime = this.getQueryTime();
                    data.queryTime = queryTime;
                }
                this.$http.post(url, data, headers).then(function (res) {
                    console.log(res)
                    if (res.body.status_code === 0) {
                        this.tableData = res.body.payload.records;
                        this.totalCount = res.body.payload.total;
                    } else {
                        console.log(res.body.description);
                        // window.location.href = '/monitor/login.html';
                    }
                }, function () {
                    console.log('failed');
                    // window.location.href = '/monitor/login.html';
                });
            },


            // 查看明细数据
            handleJsonDetail: function (title, type, content, keyWord) {
                this.title = title;
                this.type = type;
                this.content = content;
                this.keyWord = keyWord;
                const result = this.isJson(content);
                if (result) {
                    this.detail = JSON.stringify(JSON.parse(content), null, 4);
                } else {
                    this.detail = JSON.stringify(content, null, 4);
                }
            },
            isJson: function (str) {
                if (typeof str == 'string') {
                    try {
                        const obj = JSON.parse(str);
                        if (typeof obj == 'object' && obj) {
                            return true;
                        } else {
                            return false;
                        }
                    } catch (e) {
                        console.log('error：' + str + '!!!' + e);
                        return false;
                    }
                }
                console.log('It is not a string!')
            },
            // 查询当前时间
            getQueryTime: function () {
                // 查询近48h的数据
                var curTime = new Date().getTime() - 2 * 24 * 60 * 60 * 1000;
                var date = new Date(curTime);
                var year = date.getFullYear();
                var dateArr = [
                    date.getMonth() + 1,
                    date.getDate(),
                    date.getHours(),
                    date.getMinutes(),
                    date.getSeconds(),
                ];
                var strDate = year + "-" + dateArr[0] + "-" + dateArr[1] + " " + dateArr[2] + ":" + dateArr[3] + ":" + dateArr[4];
                return strDate;
            },

            //每页显示数据量变更
            handleSizeChange: function (val) {
                this.pageSize = val;
                var syncStatus = $("#sync-status").val();
                var code = $("#code").val();
                var sourceCode = $("#only-source-code").val();
                var sourceSchemaName = $("#source-schema-name").val();
                var schemaRelationName = $("#schema-relation-name").val();
                this.loadData(this.currentPage, this.pageSize, code, sourceCode, sourceSchemaName, schemaRelationName, syncStatus);
            },

            //页码变更
            handleCurrentChange: function (val) {
                this.currentPage = val;
                var syncStatus = $("#sync-status").val();
                var code = $("#code").val();
                var sourceCode = $("#only-source-code").val();
                var sourceSchemaName = $("#source-schema-name").val();
                var schemaRelationName = $("#schema-relation-name").val();
                this.loadData(this.currentPage, this.pageSize, code, sourceCode, sourceSchemaName, schemaRelationName, syncStatus);
            },

            // 搜索
            search: function () {
                var syncStatus = $("#sync-status").val();
                var code = $("#code").val();
                var sourceCode = $("#only-source-code").val();
                var sourceSchemaName = $("#source-schema-name").val();
                var schemaRelationName = $("#schema-relation-name").val();
                this.loadData(this.currentPage, this.pageSize, code, sourceCode, sourceSchemaName, schemaRelationName, syncStatus);
            }
        },
    });
    //载入数据
    vue.loadData(vue.currentPage, vue.pageSize);

</script>
</body>
</html>
